<template>
    <div class="cart-img-info">
        <n-image
            :width="imgSize"
            :src="detail.picUrl || detail.coverImgUrl"
            object-fit="cover"
            :style="{ border: '1px solid #999999', boxShadow: '0 5px 50px #999999'}"
        />
        
        <div class="r-info">
            <p class="text-sm hover:underline cursor-pointer">{{ detail.name }}</p>
            <p class="text-xs text-gray-500">{{ detail.copywriter || cartDetail.nickname}}</p>
        </div>
    </div>
</template>

<script>
import {NImage} from 'naive-ui';
import {onMounted, reactive, toRefs, watchEffect} from "vue";
// 歌曲信息封面小卡片
export default {
    name: "SongShotInformationCart",
    props: {
        imgSize: String,
        detail: {
            type: Object,
            default() {
                return {
                    name: 'default',
                    picUrl: require("@/assets/image/home/defaultAva.svg"),
                    copywriter: 'default'
                }
            }
        }
    },
    setup(props) {
        const cartInfo = reactive({
            cartDetail: {
                nickname: ''
            }
        })
        
        onMounted(() => {
            watchEffect(() => {
                let pd = props.detail;
                if (typeof (pd.creator) === "undefined") {
                    // 什么都不做
                } else {
                    cartInfo.cartDetail.nickname = pd.creator.nickname;
                }
            })
        })
        return {
            ...toRefs(cartInfo)
        }
    },
    components: {
        NImage
    }
}
</script>

<style lang="scss" scoped>
.cart-img-info {
    .r-info {
        width: 150px;
    }
}
</style>